<template>
  <!-- 查询区域 -->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <!-- 有些系统是4个字 -->
        <a-col flex="130px">
          <a-form-item label="类型" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 18 }">
            <JDictSelectTag
              placeholder="全部"
              v-model:value="queryParam.typeIds"
              dictCode="afficheType"
              :dropdownStyle="{ width: '120px', overflow: 'auto' }"
              :dropdownMatchSelectWidth="false"
              :showArrow="false"
            />
          </a-form-item>
        </a-col>

        <a-col flex="320px">
          <a-form-item label="发布日期" :label-col="{ style: { width: '70px' } }" :wrapper-col="{ style: { width: '245px' } }">
            <a-date-picker
              v-model:value="queryParam.beginDate"
              :disabled-date="disabledStartDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 109px; padding: 4px;"
            /> ~
            <a-date-picker
              v-model:value="queryParam.endDate"
              :disabled-date="disabledEndDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 109px; padding: 4px;"
            />
          </a-form-item>
        </a-col>

        <a-col flex="268px">
          <a-form-item label="标题" :label-col="{ style: { width: '40px' } }">
            <a-input placeholder="" v-model:value="queryParam.title" ></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float:right; width:90px; margin-right: 0px;">
          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" preIcon="ant-design:search" @click="searchQuery" style="margin-right: 8px">查询</a-button>
            <a-button color="success" preIcon="ant-design:plus-outlined" @click="handleAdd">新增</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <!--引用表格-->
  <BasicTable @register="registerTable" 
    :onRowDbClick="handleDblclick" :onRowClick="handleClick" :rowClassName="rowClassName" 
    :loading="loading"
  >
    <!--操作栏-->
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" />
    </template>
  </BasicTable>

  <!-- 表单区域 -->
  <AfficheModal @register="registerModal" @success="handleSuccess"></AfficheModal>

</template>

<script lang="ts" name="full-affiche" setup>
  import {ref, computed, unref, onMounted, toRaw, reactive} from 'vue';
  import {BasicTable, useTable, TableAction} from '/@/components/Table';
  import {useModal} from '/@/components/Modal';
  import {useListPage} from '/@/hooks/system/useListPage'
  import {momentSearchQueryDate} from "/@/utils/dateUtil";
  import AfficheModal from './modules/AfficheModal.vue'
  import {columns, searchFormSchema} from './Affiche.data';
  import {list, deleteOne, batchDelete, getImportUrl, getExportUrl} from './Affiche.api';

  import moment from 'dayjs'
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';


  // 自动请求并暴露内部方法
  onMounted(() => {
    //console.info("onMounted@@", moment().valueOf)
  });

  //初始化 -------------------------------------------------------------
  //定义查询表单，查询条件
  const queryParam = reactive<any>({
    typeIds: [],
    beginDate : momentSearchQueryDate('sub'),
    endDate: momentSearchQueryDate('add'),
  });

  //限制查询日期，开始日期不能大于结束日期
  function disabledStartDate(beginDate) {
    const endDate = queryParam.endDate;
    if (!beginDate || !endDate) {
      return false;
    }
    return beginDate.valueOf() > moment(endDate).valueOf()
  }

  function disabledEndDate(endDate) {
    const beginDate = queryParam.beginDate;
    if (!endDate || !beginDate) {
      return false;
    }
    return moment(beginDate).valueOf() > endDate.valueOf();
  }

  function changeWskchecked(e) {
    queryParam.wskchecked = e.target.checked;
  }
  //初始化 -------------------------------------------------------------
  /**
   * 序号列配置
   */
  const indexColumnProps = {
      width: 12,
      dataIndex: 'index',
  };
  // 列表页面公共参数、方法
  const loading  = ref<boolean>(false);
  //注册table数据
  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
    designScope: 'full-list',
    tableProps:{
      rowKey: '(row) => row.id',
      api: list,
      columns: columns,
      showTableSetting: false,
      size:'small',
      showIndexColumn: true,    //行号
      clickToRowSelect: true,   //点击选择
      showActionColumn: true,
      useSearchForm: false,
      showSummary: false,
      indexColumnProps: indexColumnProps,
      beforeFetch: (params) => {Object.assign(params, unref(queryParam))},
      actionColumn: {
        width: 45,
      },
    },
  })

  //注册table数据
  const [registerTable, {reload, setProps, getRawDataSource, redoHeight},{ rowSelection, selectedRowKeys }] = tableContext

  //查询事件
  function searchQuery() {
    setProps({searchInfo:toRaw(queryParam)});
    reload()
  }

  function searchReset() {
    Object.assign(queryParam, {ddlxIds: '', ddzt: '', ywlx: ''});
  }

  //双击行
  function handleDblclick(record) {
    handleEdit({ id: record.id });
  }

  //单击行
  let selectRows = reactive<any>({id: ''});
  function handleClick(record) {
    selectRows.id = record.id
  }

  function rowClassName(record, index) {
    return record.id === selectRows.id ? 'row-selected' : '';
  }

  function handleSummary(tableData: Recordable[]) {
    const res = getRawDataSource()
    redoHeight();
    if (res) {
      return getRawDataSource().summary;
    } else {
      return [];
    }
  }
  //---------------------------------------------

  //注册model
  const [registerModal, {openModal : openModal}] = useModal();

  /**
   * 新增事件
   */
  function handleAdd() {
    openModal(true, {
      isUpdate: false,
      showFooter: true,
    });
  }

  /**
   * 编辑事件
   */
  function handleEdit(record) {
    //let record = {id: selectRows.id}
    openModal(true, {
      record,
      isUpdate: true,
      showFooter: true,
    });
  }


  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteOne({id: record.id}, reload);
  }

  /**
   * 成功回调
   */
  function handleSuccess({isUpdate, values}) {
    reload();
  }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '编辑',
        icon: "ant-design:form-outlined",
        color: "success",
        onClick: handleEdit.bind(null, record),
      },
      {
        label: '删除',
        color: "error",
        icon: "ant-design:rest-twotone",
        popConfirm: {
          title: '是否确认删除',
          confirm: handleDelete.bind(null, record),
        },
      },
    ];
  }
</script>

<style scoped>

</style>